

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>留言板简易版</title>
	<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	$(function(){

		$('#all div.bt ul.color li.c').click(function() {
			
			var c=$(this).css('backgroundColor');
			$("#all").css({backgroundColor:c});
			
		});
	});
	</script>
	<style type="text/css">
	*{
		padding: 0;
		margin:0;
	}
	ul{
		list-style: none;
	}
	textarea{
	resize: none;
} 
	div#all{
		box-shadow: 0px 0px 10px ;
		width: 978px;
		height: 724px;
		background-color:#08C9D5;
		margin: 0 auto;
	}
	#all .top{
		float: left;
		height: 68px;
		width: 970px;
		margin:4px;
		/*filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#077AB1, endColorStr=#002F43, gradientType=1);*/
		/*filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#86CEFF,endcolorstr=#000099,gradientType=1);*/
	}
	#all .top h1{
		text-align: left;
		line-height: 68px;
		padding-left: 16px;
		color: #fff;
		
	}
	#all .middle{
		float: left;
		height: 643px;
		width: 970px;
		background-color: #fff;
		margin:0px 4px 4px 5px;
	}
	#all .NewMessage{
		height: 209px;
		width: 970px;
		float: left;
		position: relative;
	}
	#all div.bt{
		height: 30px;
		width: 970px;
		background-color: #D7E7F6;
	}
	#all div.bt h2{
		line-height: 30px;
		padding-left: 10px;
		color: #0066BB;
		font-size: 14px;
	}
	#all div.bt ul.color{
		height: 14px;
		width: 85px;
		position: absolute;
		right: 0px;
		top: 6px;
	}
	#all div.bt ul.color li.c {

		display: block;
		height: 14px;
		width: 14px;
		float: left;
		margin-right: 7px;
		background: red;
		border-radius: 2px;
	}
	#all .NewMessage .MessageNew{
		height: 179px;
		width: 970px;
		float: left;
	}
	#all .message{
		height:434px;
		width: 970px;
		float: left;
	}
	#all .nameSex{
		margin-left: 23px;
		margin-top: 8px;
	}
	/*#all .nameSex input.name{
		display: block;
		border:1px solid #6DA9DB;
		height: 17px;
		width: 150px;
	}*/
	#all .message .ul{
		height:404px;
		width: 970px;
		float: left;
		overflow: auto;
	}
	#all .message .ul ul.message1{
		width: 970px;
		
	}
	#all .message .ul ul.message1 li{
		display:block;
		float: left;
		width: 950px;
		height: 100px;
		margin: 10px 10px 0px 10px;
		border:1px solid #AFD3ED;

	}
	#all .message .ul ul.message1 li div.top1{
		height: 32px;
		width: 950px;
		float: left;
		background-color: #EBF4FB;
		line-height: 32px;

	}
	#all .message .top1 img{
		display: block;
		float: left;
	}
	#all .message .top1 strong{
		float: left;
		line-height: 32px;
		
		color: #0469B9;
		
	}
	#all .message .top1  span{
		font-weight: 400;
		color: #0469B9;
		line-height: 32px;
		float: left;
	}
	#all .message .top1 div.name1{
		height: 32px;
		width: 80px;
		overflow: hidden;
		float: left;
	}
	#all .message .top2{
		height: 70px;
		width: 950px;
		float: left;
	}
	div.top2 p{
		font-size: 14px;
		font-family: 微软雅黑;
		color: red;
	}
	#all .message .top1  strong.right{
		display: block;
		float: right;
		margin-right: 10px;
	}
	#all .message .top1 div.right_1{
		float: right;
		margin-right: 10px;
		/*height: 32px;
		width: 75px;*/
	}
	#all .message .top1 div.right_1 a{
		color: #DE4E4E;
		text-decoration: none;

	}
	#all .message .top1 div.right_1 a:hover{
		text-decoration: underline;
	}
	</style>
</head>
<body>

	<div id="all">
		<div class="top"><h1>留言板,廖东廷制作QQ725636367<a href="jd/index.html">京东首页</a></div></h1>
		<div class="middle">
			<div class="NewMessage">
				<div class="bt">
				<h2>发表留言</h2>
				<ul class="color">
					<li class="c" style="background:#4CD2D6;"></li>
					<li class="c" style="background:#B2D40E;"></li>
					<li class="c" style="background:#E73F72;"></li>
					<li class="c" style="background:#FAAC3F;"></li>
				</ul>
				</div>
				<div class="MessageNew">
				<div class="nameSex">
				<form action="" method="post">
					<strong>昵称(*):</strong>
					<input class="name" placeholder="请输入昵称..少于四位" maxlength="4" type="text" name='name' />
					<strong>性别(*):</strong>
					男:<input value="男" checked="checked" type="radio" name="sex" id="" />
					女:<input value="女" type="radio" name="sex" id="" />
					<br />
					<strong>选择图像</strong>
					<input checked="checked" value='girl.jpg' type="radio" name="jpg" id="" />
					<img src="images/girl.jpg" alt="" />
					<input value='man1.jpg' type="radio" name="jpg" id="" />
					<img src="images/man1.jpg" alt="" />
					<input value="oldman.jpg" type="radio" name="jpg" id="" />
					<img src="images/oldman.jpg" alt="" />
					<br />
					<strong align="center">内容(*):</strong>
					<textarea maxlength="41" resize="none" name="text" id="" cols="30" rows="1"></textarea>
					<br />
					<input style="margin-left:78px;" type="submit" value="提交" />
					</form>

				</div>
				
					
				</div>
			</div>
			<div class="message">
			<div class="bt">
				<h2>留言列表</h2>
				<div class="ul">
					<ul class="message1">

					<?php if ($db==1): ?>
						<h2>请留言</h2>
					<?php else: ?>
						<?php foreach(array_reverse($db) as $k => $v): ?>
						<li><div class="top1">
							<img src="images/<?php echo strips($v['jpg']); ?>" />
							<strong>昵称：</strong><div class="name1"><span><?php echo strips($v["name"]) ?></span></div>
							<strong>性别：</strong>
							<div class="name1"><span><?php echo $v["sex"] ?></span></div>
							<strong>时间：</strong>
							<span><?php echo $v["time"] ?></span>
							
							<strong class='right'><?php echo (count($db)-$k) ?>F</strong>
							<div class="right_1">
							<?php $p=count($db)-$k; ?>
								<a href="./edit.php?id=<?php echo $p ?>">修改</a>|<a  onclick="if(confirm('确定删除吗？')) location.href='./del.php?id=<?php echo $p ?>'">删除</a>
							</div>
						</div>
						<div class="top2"><p><?php echo strips($v['text']) ?></p></div></li>
					<?php endforeach ?>
					<?php endif ?>
					
					
					
					</ul>
				</div>
				
				</div>
				
			</div>
		</div>	
	</div>
	
</body>
</html>
